<template>
  <div class="postlist">
    <router-link
      v-for="item in list"
      :key="item.id"
      :to="{
        name: 'Post',
        query: {
          id: item.id,
        },
      }"
      ><div class="item">
        <h3>{{ item.name }}</h3>
        <p>{{ item.content }}</p>
        <span>{{ item.user.nickName ? item.user.nickName : item.name }}</span>
        <span>{{ item.createdAt | time }}</span>
      </div></router-link
    >
  </div>
</template>
<script>
import { loadList } from "../services/posts.js";
// import { get } from "../utils/request";
export default {
  data() {
    return {
      page: 1,
      list: [],
    };
  },
  created() {
    loadList(this.$route.query.id, this.page).then((res) =>
      this.list.push(...res.data)
    );
  },
};
</script>

<style scoped>
.postlist {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.item {
  height: 6rem;
  width: 83vw;
  padding: 1rem 0px;
  border-bottom: 1px solid #999;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-around;
  text-align: left;
}
a {
  text-decoration: none;
}
span {
  color: #999;
}
p {
  padding: 10px 0;
}
</style>
